<template>
  <div v-on:dragover.prevent>
    <div 
      v-bind:style="{ transform: `translate(${ x }px, ${ y }px)` }"
      v-on:mousedown="mousedown"
      v-on:mouseup="mouseup"
      v-on:mousemove="mousemove"
      class="draggable"
    >
      Drag me
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      x: 0,
      y: 0
    }
  },
  methods: {
    mousedown (e) {
      this.x = e.clientX
      this.y = e.clientY
    },
    mouseup () {
      this.x = 0
      this.y = 0
    },
    mousemove (e) {
      const dx = e.clientX - this.x
      const dy = e.clientY - this.y

      this.x = e.clientX
      this.y = e.clientY

      this.$emit('drag', dx, dy)
    }
  }
}
</script>